import React, { useState, useEffect } from 'react'
import { Form, Card, Select, Input, Button, Table, Space, message } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

import { useNavigate } from 'react-router-dom'

import {
  reqGetHospitalList,
  reqProvince,
  reqCityOrdistrict,
  reqUpdateStatus,
} from '@api/hospital/hospitalList'
import {
  IhospitalListType,
  IprovinceListType,
} from '@/api/hospital/model/hospitalListTypes'
const { Option } = Select
export default function HospitalList() {
  const navigate = useNavigate()
  // 创建form实例
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(50)
  const [hospitalList, setHospitalList] = useState<IhospitalListType>([])

  // 省,市,区的数据
  const [province, setProvince] = useState<IprovinceListType>([])
  const [city, setCity] = useState<IprovinceListType>([])
  const [district, setDistrict] = useState<IprovinceListType>([])

  // 医院类型的数据
  const [hosType, setHosType] = useState<IprovinceListType>([])

  // 获取省市区数据时,loading的状态
  const [ploading, setPloading] = useState(false)
  const [cloading, setCloading] = useState(false)
  const [dloading, setDloading] = useState(false)

  useEffect(() => {
    getHospitalList(page, pageSize)
    getProvince() // 获取省数据
    getHospitalType() //获取医院类型数据
  }, [])

  async function getHospitalList(page: number, pageSize: number) {
    setLoading(true)
    // 获取form表单中的数据
    const {
      hosname,
      hoscode,
      provinceCode,
      cityCode,
      districtCode,
      status,
      hostype,
    } = form.getFieldsValue()
    const result = await reqGetHospitalList({
      page,
      pageSize,
      hosname,
      hoscode,
      provinceCode,
      cityCode,
      districtCode,
      status,
      hostype,
    })

    setPage(page)
    setPageSize(pageSize)
    setTotal(result.totalElements)
    setHospitalList(result.content)
    setLoading(false)
  }

  // 获取省数据的函数
  async function getProvince() {
    setPloading(true)

    const result = await reqProvince()
    setProvince(result)
    setPloading(false)
  }

  // 获取市数据的函数
  async function getCity(value: string) {
    setCloading(true)

    //重新选择省的数据时,清除表单中市和区之前选中的值
    form.setFieldsValue({ cityCode: undefined, districtCode: undefined })

    const result = await reqCityOrdistrict(value)
    setCity(result)
    setCloading(false)
  }
  // 获取区的数据
  async function getDistrict(value: string) {
    setDloading(true)
    // 重新选择市,清除区的数据
    form.setFieldsValue({ districtCode: undefined })
    const result = await reqCityOrdistrict(value)
    setDistrict(result)
    setDloading(false)
  }

  // 获取医院类型的数据的方法
  async function getHospitalType(value = '10000') {
    const result = await reqCityOrdistrict(value)
    setHosType(result)
  }

  // 根据条件查询数据
  async function onFinish() {
    getHospitalList(page, pageSize)
  }

  // 清空表单查询数据
  async function clearAll() {
    form.resetFields()
    getHospitalList(page, pageSize)
  }

  const columns = [
    {
      title: '序号',
      render: (text: any, record: any, index: number) => {
        return index + 1
      },
      align: 'center' as 'center',
    },
    {
      title: '医院logo',
      dataIndex: 'logoData', // 如果dataIndex和render同时使用,则render中第一个参数拿到的就是dataIndex指定数据值
      render: (text: string) => {
        // console.log(text)
        return <img width="80" src={`data:image/png;base64,` + text} alt="" />
      },
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      // dataIndex: 'param.hostypeString',
      render: (text: any) => {
        return text.param.hostypeString
      },
    },
    {
      title: '详细地址',
      // dataIndex: 'param.fullAddress',
      render: (text: any) => {
        return text.param.fullAddress
      },
    },
    {
      title: '状态',
      // dataIndex: 'status',
      render: (text: any) => {
        return text.status === 1 ? '已上线' : '未上线'
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      render: (text: any) => {
        return (
          <Space>
            <Button
              type="primary"
              onClick={() => {
                navigate('/syt/hospital/hospitalList/show/' + text.id)
              }}
            >
              查看
            </Button>
            <Button
              type="primary"
              onClick={() => {
                navigate(`/syt/hospital/hospitalList/schedule/` + text.hoscode)
              }}
            >
              排班
            </Button>
            <Button
              type="primary"
              onClick={async () => {
                await reqUpdateStatus(text.id, text.status ? 0 : 1)
                message.success(`${text.status === 1 ? '下线' : ' 上线'}成功`)
                getHospitalList(page, pageSize)
              }}
            >
              {text.status === 1 ? '下线' : '上线'}
            </Button>
          </Space>
        )
      },
    },
  ]

  return (
    <Card>
      <Space direction="vertical" size={'large'}>
        <Form layout="inline" form={form} onFinish={onFinish}>
          <Form.Item name="provinceCode" style={{ width: 200 }}>
            <Select
              placeholder="请选择省"
              onChange={getCity}
              loading={ploading} // 控制下拉框的数据是否获取完毕的加载效果
            >
              {province.map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="cityCode" style={{ width: 200 }}>
            <Select
              placeholder="请选择市"
              onChange={getDistrict}
              loading={cloading}
            >
              {city.map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="districtCode" style={{ width: 200 }}>
            <Select placeholder="请选择区" loading={dloading}>
              {district.map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="hosname" style={{ width: 200 }}>
            <Input placeholder="医院名称" />
          </Form.Item>
          <Form.Item name="hoscode" style={{ width: 200 }}>
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item name="hostype" style={{ width: 200, marginTop: 20 }}>
            <Select placeholder="医院类型">
              {hosType.map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="status" style={{ width: 200, marginTop: 20 }}>
            <Select placeholder="医院状态">
              {/* 注意: 在jsx中,属性值直接写引号,一定是字符串. 如果像表示数字或其他类型要使用插值表达式 */}
              <Option value={1}>已上线</Option>
              <Option value={0}>未上线</Option>
            </Select>
          </Form.Item>
          <Form.Item style={{ marginTop: 20 }}>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              查询
            </Button>
          </Form.Item>
          <Form.Item style={{ marginTop: 20 }}>
            <Button onClick={clearAll}>清空</Button>
          </Form.Item>
        </Form>

        <Table
          loading={loading}
          columns={columns}
          dataSource={hospitalList}
          rowKey="id"
          pagination={{
            total,
            current: page,
            pageSize,
            showSizeChanger: true,
            pageSizeOptions: [2, 5, 10],
            showQuickJumper: true,
            showTotal: () => {
              return `总共${total}条`
            },
            onChange: getHospitalList,
          }}
        ></Table>
      </Space>
    </Card>
  )
}
